<template>
  <div>
    <h1 class="logo">
     
      <router-link to="/">网易云音乐</router-link>
    </h1>
    <ul class="m-nav">
      <li class="fst">
        <span>
          <a href="#" class="z-slt">
            <em>发现音乐</em>
            <sub class="cor">&nbsp;</sub>
          </a>
        </span>
      </li>
      <li>
        <span>
          <a href="javascript:;">
            <em>我的音乐</em>
            <!-- <sub class="cor">&nbsp;</sub> -->
          </a>
        </span>
      </li>
      <li>
        <span>
          <a href="javascript:;">
            <em>朋友</em>
            <!-- <sub class="cor">&nbsp;</sub> -->
          </a>
        </span>
      </li>
      <li>
        <span>
          <a href="javascript:;">
            <em>商城</em>
            <!-- <sub class="cor">&nbsp;</sub> -->
          </a>
        </span>
      </li>
      <li>
        <span>
          <a href="javascript:;">
            <em>音乐人</em>
            <!-- <sub class="cor">&nbsp;</sub> -->
          </a>
        </span>
      </li>
      <li>
        <span>
          <a href="javascript:;">
            <em>下载客户端</em>
          </a>
        </span>
        <sub class="hot">&nbsp;</sub>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
   name:'MusicHeadNav',
  
};
</script>

<style lang="less" scoped>
.logo {
  float: left;
  width: 176px;
  height: 69px;
  background: url(../images/topbar.png) no-repeat 0 0;
  a {
    float: left;
    width: 157px;
    height: 100%;
    padding-right: 20px;
    text-indent: -9999px;
  }
}
.m-nav {
  float: left;
  li {
    position: relative;
    float: left;
    height: 70px;
    font-size: 14px;
  }
  a {
    float: left;
    height: 70px;
    padding: 0 19px;
    line-height: 70px;
    text-align: center;
    color: #ccc;
    &:hover {
      background: #000;
      text-decoration: none;
      color: #fff;
    }
  }

  .z-slt {
    background: #000;
    text-decoration: none;
    color: #fff;
    .cor {
      display: block;
      position: absolute;
      left: 50%;
      top: 64px;
      width: 12px;
      height: 7px;
      margin-left: -6px;
      overflow: hidden;
      background: url(../images/topbar.png) no-repeat -226px 0;
    }
  }

  .hot {
    display: block;
    position: absolute;
    top: 21px;
    left: 100px;
    width: 28px;
    height: 19px;
    background: url(../images/topbar.png) no-repeat -190px 0;
  }
}
</style>